<template>
  <div>
    <!-- // 输入框 -->
    <div class="search">
      <a-input-search
        v-model:value="value"
        placeholder="姓名/学号/论题"
        enter-button="搜索"
        size="default "
        @search="onSearch"
      />
      <a-button type="primary" size="default ">重置</a-button>
    </div>
    <!-- 表格 -->
    <div>
      <a-table
        :rowKey="(row) => row.id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="{
          total: dataSource.length,
          showQuickJumper: true,
        }"
        @change="handleTableChange"
        :loading="loading"
        bordered
      >
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'id'">
            <span class="text">{{ text }}</span>
          </template>
          <template v-if="column.dataIndex === 'state'">
            <div v-if="text !== ''">
              <span>{{ text }}</span>
              <span v-if="true" class="font">一辩</span>
              <!-- <span v-if="true" class="font">二辩</span> -->
            </div>
            <span v-else-if="text === ''" class="style_yellow style_bold"
              >等待录入</span
            >
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <span>
              <a class="btn" @click="editHandler"><file-search-outlined /></a>
              &nbsp;
            </span>

            <span>
              <a class="btn" @click="searchHandler"><form-outlined /></a>
              &nbsp;
            </span>
          </template>
        </template>
      </a-table>

      <a-button
        class="editable-add-btn"
        style="margin-bottom: 8px"
        @click="handleAdd"
        >Add</a-button
      >
    </div>
  </div>
</template>



<script setup>
import { computed, defineComponent, reactive, ref } from "vue";

import {
  CheckOutlined,
  FormOutlined,
  FileSearchOutlined,
} from "@ant-design/icons-vue";
import { cloneDeep } from "lodash-es";
const columns = [
  { title: "序号", dataIndex: "key" },
  { title: "学号", dataIndex: "id" },
  { title: "姓名", dataIndex: "name" },
  { title: "学院", dataIndex: "college" },
  { title: "专业", dataIndex: "major" },
  { title: "班级", dataIndex: "class" },
  { title: "论题名称", dataIndex: "thesis" },
  { title: "指导老师", dataIndex: "tutor" },
  { title: "状态", dataIndex: "state" },
  { title: "操作", dataIndex: "operation" },
];

const value = ref("");
const onSearch = () => {
  console.log(12312);
};

const loading = ref(false);
const dataSource = ref(
  Array(100)
    .fill(1)
    .map((item, index) => ({
      key: index + 1,
      id: "2019001" + index,
      name: "赵展 " + index,
      college: "信息技术学院",
      major: "计算机应用技术",
      class: 1901 + "班",
      thesis: "论题一",
      tutor: "王老师",
      state: 78,
    }))
);
console.log(dataSource);

const count = computed(() => dataSource.value.length + 1);
// 编辑
const editableData = reactive({});
const edit = (key) => {
  editableData[key] = cloneDeep(
    dataSource.value.filter((item) => key === item.key)[0]
  );
};

// 删除
const onDelete = (key) => {
  dataSource.value = dataSource.value.filter((item) => item.key !== key);
  dataSource.value = Array(dataSource.value.length)
    .fill(1)
    .map((item, index) => ({
      key: index + 1,
      id: "2019001" + index,
      name: "赵展 " + index,
      college: "信息技术学院",
      major: "计算机应用技术",
      class: 1901 + "班",
      thesis: "论题一",
      tutor: "王老师",
      state: 78,
    }));
};
// 修改
const editHandler = () => {
  console.log("修改按钮");
};
const searchHandler = () => {
  console.log("查看");
};
// 换页
const handleTableChange = async ({ current: page }) => {
  loading.value = true;

  loading.value = false;
};

// 新增
const handleAdd = () => {
  const newData = {
    key: `${count.value}`,
    id: "2019001",
    name: "赵展",
    college: "信息技术学院",
    major: Date.now(),
    class: 1901,
    thesis: "论题一",
    tutor: "王老师",
    state: 2,
    time: Date.now(),
  };
  dataSource.value.push(newData);
};
</script>

<style lang="scss" scoped>
.search {
  float: right;
  width: 300px;
  display: flex;
  margin-bottom: 20px;
  margin-top: -2px;
  .ant-btn {
    margin-left: 20px;
  }
}
.font {
  color: #fff;
  padding: 2px 8px;
  background-color: #ca1010;
  font-size: 10px;
  border-radius: 3px;
  margin-left: 5px;
}
.btn {
  color: #666666;
}
</style>
